<template>
  <div>
    <div style="margin: 30px 30px">
      <span style="margin-right: 20px">客户</span>
      <el-select v-model="customer" placeholder="选择客户">
        <el-option label="威龙远航电脑旗舰店" value="威龙远航电脑旗舰店"></el-option>
        <el-option label="戴尔电脑专卖店" value="戴尔电脑专卖店"></el-option>
        <el-option label="淘森经营部" value="淘森经营部"></el-option>
        <el-option label="亚当旗舰店" value="亚当旗舰店"></el-option>
        <el-option label="火箭牛逼电脑旗舰店" value="火箭牛逼电脑旗舰店"></el-option>
      </el-select>
      <span style="margin-left: 150px;margin-right: 10px">销售员</span>
      {{ this.sell }}
      <span style="margin-left: 150px;margin-right: 10px">订单总额</span>
      {{ this.totalPrice() }}
      <span style="margin-left: 150px;margin-right: 10px">送货地址</span>
      <el-input v-model="address" style="width: 150px"></el-input>
    </div>

    <P style="margin-top: 50px;margin-bottom: 20px">出库物品</P>
    <el-table :data="tableData" border stripe header-cell-class-name="table-header">
      <el-table-column prop="saleName" label="商品名称"></el-table-column>
      <el-table-column prop="saleBrand" label="品牌"></el-table-column>
      <el-table-column prop="salePrice" label="建议销售价"></el-table-column>
      <el-table-column label="出库数量">
        <template #default="scope">
          <el-input v-model="scope.row.saleNumber"
                    @change="changeNumber(scope.row)"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button v-on:click="deleteById(scope.row.saleId)">
            移除商品
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 60px">
      <el-button @click="goAdd()" style="margin-left: 270px;margin-right: 570px">添加商品</el-button>
      <el-button @click="deleteAll()">出库</el-button>
    </div>

    <!--添加商品-->
    <el-dialog v-model="dialogVisibleAdd" title="添加采购商品" width="50%">
      <div class="handle-box" style="margin: 20px 0">
        <el-input v-model="stockName" placeholder="商品名称" style="width: 200px;margin: 0 20px"></el-input>
        <el-select v-model="type" placeholder="选择产品类型">
          <el-option label="电脑产品" value="1"></el-option>
          <el-option label="安防产品" value="2"></el-option>
          <el-option label="打印扫描设备" value="3"></el-option>
          <el-option label="办公耗材" value="4"></el-option>
        </el-select>
        <el-button type="primary" v-on:click="infoAdd()" style="margin-left: 20px">查询</el-button>
      </div>

      <el-table :data="tableDataAdd" border stripe header-cell-class-name="table-header">
        <el-table-column prop="stockName" label="商品名称"></el-table-column>
        <el-table-column prop="stockBrand" label="品牌"></el-table-column>
        <el-table-column prop="stockSuggestPrice" label="建议销售价"></el-table-column>
        <el-table-column label="添加">
          <template #default="scope">
            <el-button v-on:click="add(scope.row)">
              添加
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="cancel()">取消</el-button>
        </span>
      </template>

      <!--分页-->
      <el-pagination style="width:400px;margin: 30px auto" v-model:page-size="pageSize" v-model:current-page="curPage"
                     :total="total" background @current-change="infoAdd"></el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "sale",
  created() {
    this.info()
    axios.post('/api/sale/sell',null).then(response=>{
      this.sell = response.data
    })
  },
  data() {
    return {
      customer: '',
      address: '',
      tableData: [],
      dialogVisibleAdd: false,
      addForm: {},
      sell: '',
      tableDataAdd: [],
      pageSize: 4,
      curPage: 1,
      total: 0,
      stockName: '',
      type: '',
    }
  },
  methods: {
    info() {
      axios.get('/api/sale/info', null).then(response => {
        this.tableData = response.data
      })
    },
    infoAdd() {
      let param = {
        "curPage": this.curPage,
        "pageSize": this.pageSize,
        data: {"stockName": this.stockName, "stockType": this.type}
      }
      let config = {
        headers: {
          'Content-Type': 'application/json'
        }
      }
      axios.post('/api/stock/info', param, config).then(response => {
        this.tableDataAdd = response.data.records
        this.total = response.data.total
      })
    },
    changeNumber(row) {
      let param = new URLSearchParams();
      param.append("number", row.saleNumber)
      param.append("name", row.saleName)
      axios.post('/api/sale/compareNumber', param).then(response => {
        if (response.data == true) {
          axios.post('/api/sale/changeNumber', row)
        } else {
          row.saleNumber = 0
          ElMessage.error("预出库数量大于库存数量")
        }
      })
    },
    deleteById(id) {
      let param = new URLSearchParams();
      param.append("id", id)
      axios.post('/api/sale/delete', param).then(response => {
        if ("删除成功" == response.data) {
          ElMessage.success('删除成功');
          this.info()
        } else {
          ElMessage.error('删除失败');
        }
      })
    },
    goAdd() {
      this.dialogVisibleAdd = true;
      this.infoAdd()
    },
    add(row) {
      let param = {
        saleId: row.stockId,
        saleName: row.stockName,
        saleBrand: row.stockBrand,
        salePrice: row.stockSuggestPrice,
        type:row.stockType,
        saleNumber: 1
      }
      axios.post('/api/sale/add', param).then(response => {
        this.dialogVisibleAdd = false;
        this.info()
      })
    },

    //出库
    deleteAll() {
      let param = {
        customerName: this.customer,
        salePerson: this.sell,
        saleTotalPrice:this.totalPrice(),
        saleAddress:this.address,
      }
      axios.post('/api/saleMes/add', param).then(response => {
        let saleMesId = response.data
        if (saleMesId > 0) {
          let saleList = []
          let saleDetails = []
          axios.get('/api/sale/info', null).then(response => {
            saleList = response.data
            saleList.forEach(s => {
              saleDetails.push({
                saleDetailsId: s.saleId,
                saleDetailsName: s.saleName,
                saleDetailsBrand: s.saleBrand,
                saleDetailsPrice: s.salePrice,
                saleDetailsNumber: s.saleNumber,
                type:s.type,
                fkSaleMesId: saleMesId
              })
            })
            saleDetails.forEach(s => {
              axios.post('/api/saleDetails/add', s)
            })
            saleList.forEach(s => {
              axios.get('/api/stock/changeNumber?name=' + s.saleName + '&number=' + s.saleNumber)
            })
            axios.get('/api/sale/deleteAll', null).then(response=>{
              ElMessage({
                message: '出库成功',
                type: 'success',
              })
              this.info()
              let param = new URLSearchParams();
              param.append("mes","成功出库")
              axios.post('/api/journal/add',param)
            })
            this.customer = ''
            this.address = ''
          })
        } else {
          ElMessage.error('出库失败')
          this.info()
        }
      })
    },

    totalPrice() {
      let totalPrice = 0
      for (let i in this.tableData) {
        totalPrice += this.tableData[i].salePrice * this.tableData[i].saleNumber
      }
      return totalPrice
    },

    cancel(){
      this.dialogVisibleAdd = false
      this.stockName = ''
      this.type=''
    }
  }
}
</script>

<style scoped>

</style>